<template>
  <!-- 侧边区域 -->
  <div class="aside">
    <div class="d-user-profile" v-if="!$store.state.Login.isLogin">
      <p class="note">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
      <a
        href="javascript:void(0);"
        class="login-btn"
        @click="$store.commit('Login/setLoginDisplay', true)"
        >用户登录</a
      >
    </div>
    <div class="d-user-profile login" v-else>
      <div class="user-info">
        <div class="avater">
          <img
            :src="userInfo.profile.avatarUrl"
            alt=""
          />
        </div>
        <div class="info">
          <h4 class="name">
            <span>{{userInfo.profile.nickname}}</span
            ><img
              src="http://p6.music.126.net/obj/wovDmcKXw6PCn2_CmsOk/4189721408/7a2f/2750/5084/9122db92c1927ed189539ab5b116cb49.png"
              alt=""
            />
          </h4>
          <div class="lv"><i class="u-icn2 left">{{userInfo.level}}</i><i class="u-icn2 right"></i></div>
          <div class="sign u-btn2"><i class="u-btn2">签到</i></div>
        </div>
      </div>
      <ul>
        <li>
          <strong class="num">{{userInfo.profile.eventCount}}</strong>
          <span>动态</span>
        </li>
        <li>
          <strong class="num">{{userInfo.profile.follows}}</strong>
          <span>关注</span>
        </li>
        <li>
          <strong class="num">{{userInfo.profile.followeds}}</strong>
          <span>粉丝</span>
        </li>
      </ul>
    </div>
    <div class="d-singer">
      <div class="hd">
        <h4>入驻歌手</h4>
        <router-link to="/discover/artist/signed" class="more">查看全部></router-link>
      </div>
      <ul class="singer-list">
        <li v-for="item in singer" :key="item.id">
          <router-link :to="`/user/home?id=${item.id}`">
            <img :src="item.img" :title="item.name" />
            <div class="info">
              <h4 class="singer-name">{{ item.name }}</h4>
              <p class="singer-desc">{{ item.desc }}</p>
            </div>
          </router-link>
        </li>
      </ul>
      <div>
        <a href="https://music.163.com/recruit" target="_blank" class="apply-btn u-btn2"
          >申请成为网易音乐人</a
        >
      </div>
    </div>
    <div class="d-dj">
      <div class="hd">
        <h4>热门主播</h4>
      </div>
      <ul class="dj-list">
        <li v-for="item in dj" :key="item.id">
          <router-link :to="`/user/home?id=${item.id}`">
            <img :src="item.img" :title="item.name"
          /></router-link>
          <div class="info">
            <p class="dj-name">
              <router-link :to="`/user/home?id=${item.id}`">{{ item.name }}</router-link>
            </p>
            <p class="dj-desc">{{ item.desc }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      singer: [
        {
          img: 'http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62',
          name: '张惠妹aMEI',
          desc: '台湾歌手张惠妹',
          id: '29879272'
        },
        {
          img: 'http://p1.music.126.net/TQZGbxp-xnJla-q7ii9z0A==/1364493985498917.jpg?param=62y62',
          name: '吴莫愁Momo',
          desc: '《中国好声音》选手吴莫愁',
          id: '650120'
        },
        {
          img: 'http://p1.music.126.net/ZEEvSOoXV7Dv2QEkqUN3zg==/109951165625860507.jpg?param=62y62',
          name: '孙楠',
          desc: '歌手孙楠 代表作《你快回来》《燃烧》',
          id: '198554'
        },
        {
          img: 'http://p1.music.126.net/1GIlkxKmvKu66ufU83FyvA==/31885837222663.jpg?param=62y62',
          name: '麦田老狼',
          desc: '歌手，音乐人。代表作《同桌的你》等。',
          id: '2000268'
        },
        {
          img: 'http://p1.music.126.net/g76pf89RjLZ43KvFXmZUTQ==/109951164172879163.jpg?param=62y62',
          name: '陈楚生',
          desc: '唱作歌手',
          id: '39002'
        }
      ],
      dj: [
        {
          img: 'http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40',
          name: '陈立',
          desc: '心理学家、美食家陈立教授',
          id: '278438485'
        },
        {
          img: 'http://p1.music.126.net/GgXkjCzeH4rqPCsrkBV1kg==/109951164843970584.jpg?param=40y40',
          name: '刘维-Julius',
          desc: '歌手、播客节目《维维道来》主理人',
          id: '559210341'
        },
        {
          img: 'http://p1.music.126.net/JZRLszqLQ2edeCd07JoNRQ==/109951166943043252.jpg?param=40y40',
          name: '莫非定律MoreFeel',
          desc: '男女双人全创作独立乐团',
          id: '259292486'
        },
        {
          img: 'http://p1.music.126.net/NHjNoFpLDEZ-3OR9h35z1w==/109951165825466770.jpg?param=40y40',
          name: '碎嘴许美达',
          desc: '脱口秀网络红人',
          id: '1450418799'
        },
        {
          img: 'http://p1.music.126.net/CpUdHPNvBvN7kebvL21TTA==/109951163676573083.jpg?param=40y40',
          name: '银临Rachel',
          desc: '',
          id: '2688170'
        }
      ]
    }
  },
  computed: {
    ...mapState({ userInfo: state => state.Login.userInfo })
  }
}
</script>

<style lang="less">
@import './aside.less';
</style>
